<template>
  <div>
    <el-card shadow='never'>
      <div slot='header'>
        <span style='font-size: 18px; font-weight: 700; line-height: 32px'>方案摘要</span>
      </div>
      <!-- 表单 -->
      <el-form
        v-if="editFlag == 'new'"
        ref='form'
        :model='form'
        :rules="rules"
        label-width='120px'
      >
        <el-form-item
          label='临床试验目的'
          prop='goal'
        >
          <el-input
            v-model='form.goal'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label="临床方案"
          prop='scheme'
        >
          <el-input
            type="textarea"
            v-model="form.scheme"
            style='width: 80%'
            :autosize="{ minRows: 6, maxRows: 8}"
          ></el-input>
        </el-form-item>
        <el-form-item
          label='例数'
          prop='count'
        >
          <el-input
            type="textarea"
            v-model='form.count'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='纳入标准'
          prop='bringInto'
        >
          <el-input
            type="textarea"
            v-model='form.bringInto'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='排除标准'
          prop='exclude'
        >
          <el-input
            type="textarea"
            v-model='form.exclude'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='知情同意书'
          prop='consent'
        >
          <el-input
            type="textarea"
            v-model='form.consent'
            style='width: 80%'
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form
        v-if="editFlag == 'edit'"
        ref='form'
        :model='form'
        :rules="rules"
        label-width='120px'
      >
        <el-form-item
          label='临床试验目的'
          prop='goal'
        >
          <el-input
            v-model='form.goal'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label="临床方案"
          prop='scheme'
        >
          <el-input
            type="textarea"
            v-model="form.scheme"
            style='width: 80%'
            :autosize="{ minRows: 6, maxRows: 8}"
          ></el-input>
        </el-form-item>
        <el-form-item
          label='例数'
          prop='count'
        >
          <el-input
            type="textarea"
            v-model='form.count'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='纳入标准'
          prop='bringInto'
        >
          <el-input
            type="textarea"
            v-model='form.bringInto'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='排除标准'
          prop='exclude'
        >
          <el-input
            type="textarea"
            v-model='form.exclude'
            style='width: 80%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='知情同意书'
          prop='consent'
        >
          <el-input
            type="textarea"
            v-model='form.consent'
            style='width: 80%'
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getTabListDetailsAPI } from '@/api/backStage.js';
export default {
    name: 'scheme',
    data() {
        return {
            form: JSON.parse(localStorage.getItem('scheme')) || {
                goal: '', // 临床试验目的
                scheme: '', // 临床方案
                count: '', // 例数
                bringInto: '', // 纳入标准
                exclude: '', // 排除标准
                consent: '' // 知情同意书
            },
            rules: {
                goal: [{ required: true, message: '临床试验目的不能为空', trigger: 'blur' }],
                scheme: [{ required: true, message: '临床方案不能为空', trigger: 'blur' }],
                count: [{ required: true, message: '例数不能为空', trigger: 'blur' }],
                bringInto: [{ required: true, message: '纳入标准不能为空', trigger: 'blur' }],
                exclude: [{ required: true, message: '排除标准不能为空', trigger: 'blur' }],
                consent: [{ required: true, message: '知情同意书不能为空', trigger: 'blur' }]
            }
        };
    },
    computed: {
        ...mapState({
            essentialInfo: (state) => state.applyFor,
            editFlag: (state) => {
                return state.applyFor.editFlag;
            }
        })
    },
    mounted() {
        if (this.editFlag == 'edit') {
            this.getTabListDetailsAPI();
        } else {
            this.form = {
                goal: '', // 临床试验目的
                scheme: '', // 临床方案
                count: '', // 例数
                bringInto: '', // 纳入标准
                exclude: '', // 排除标准
                consent: '' // 知情同意书
            };
        }
    },
    methods: {
        async getTabListDetailsAPI() {
            const res = await getTabListDetailsAPI({ token: this.$store.state.user.token, xmid: this.essentialInfo.applyxmid });
            if (res.code == 'succ') {
                this.form = res.result[0].FAXX;
            } else {
                this.$message.error(res.message);
            }
        }
        // onSubmit() {
        //     this.$refs.form.validate(valid => {
        //         if (valid) {
        //             // 执行操作
        //             localStorage.setItem('scheme', JSON.stringify(this.form))
        //             this.$message({ duration: 1500, message: '保存成功!', type: 'success' })
        //         }
        //     })
        // }
    }
};
</script>

<style>
.el-textarea__inner {
    font-size: 17px;
}
</style>
